<template>
  <PublicPage class="withdrawal" page-name="提现" :borderType="true" :showNav="true">
    <view class="flex-col withdrawal-group_2">
      <view class="flex-col withdrawal-group_3">
        <view class="flex-col withdrawal-section_4">
          <text class="withdrawal-text_3">余额提现</text>
          <view class="justify-between withdrawal-group_4">
            <view
              class="flex-row"
              style="hieght: 100rpx; margin: 44rpx 0 24rpx"
            >
              <text class="withdrawal-text_4">￥</text>
              <!-- <text class="withdrawal-text_5" v-if="withdrawalNum === null"
                >请输入提现金额</text
              > -->
              <input
                class="withdrawal-num"
                type="digit"
                placeholder-style="font-size: 40rpx;"
                placeholder="请输入金额"
                maxlength="8"
                v-model="withdrawalNum"
                @input="(e)=>withdrawalNumInput(e)"
              />
            </view>
            <button class="flex-col items-center withdrawal-text-wrapper" :disabled="getMoney.balance?false:true" hover-class="hover" @click="allWithdrawal">
              全部提现
            </button>
          </view>
          <view class="withdrawal-divider"> </view>
          <text class="line_clamp_2 withdrawal-text_7">当前可提现余额：¥{{getMoney.balance}}</text
          >
        </view>
        <view class="flex-col withdrawal-section_5">
          <text class="withdrawal-text_8">提现到</text>
          <view class="flex-col withdrawal-section_6">
            <view class="withdrawal-group_6" v-for="(item, index) in withdrawalOptions" :key="index" @click="withdrawalClick(index)">
              <view class="withdrawal-group_mode">
                <view class="supply-image_7" :class="{ supplyActive: supplyIndex === index }">
                  <view class="supply-round" :class="{ activeRound: supplyIndex === index }"></view>
                </view>
                <text class="withdrawal-text_9" v-if="item.name == '微信零钱'&&index == 0">{{ item.name }}</text>
                <text class="withdrawal-text_9" v-if="item.name != '微信零钱'&&index == 1">{{ bankMsgData.issuer || item.name }}</text>
                <image
                  v-if="item.name == '微信零钱'"
                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16327086238325923587.png"
                  class="withdrawal-image_7"
                />
              </view>
              <!-- <view class="flex-col withdrawal-group_7" v-if="item.name == '微信零钱' && supplyIndex == 0">
                <view class="flex-row withdrawal-group_8">
                  <text>到账账户：</text>
                  <text class="withdrawal-text_11">{{userInfo.wechatName}}</text>
                </view>
                <view class="flex-row withdrawal-group_9">
                  <text class="withdrawal-text_12">账户实名：</text>
                  <input type="text" class="input_box" maxlength="20" placeholder-style="color: #C8C9CC; font-size: 28rpx;" v-model.trim="accountName" placeholder="请输入绑定微信支付的实名" />
                </view>
              </view> -->
              <view class="justify-between withdrawal-group_10" v-if="item.name != '微信零钱' && supplyIndex == 1" @click.stop="choiceBankFn">
                <view class="flex-col">
                  <text class="withdrawal-text_15">{{ bankMsgData.cardNumber || '未填加银行卡'}}</text>
                </view>
                <image
                  src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/jiantou5_icon.png"
                  class="withdrawal-image_9"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="justify-between withdrawal-section_7">
          <view class="flex-row withdrawal-group_13">
            <!-- <text class="withdrawal-text_16">验证码：</text> -->
            <input type="number" placeholder-style="color: #C8C9CC;" maxlength="6" v-model="withdrawalCode" placeholder="请输入验证码" />
          </view>
          <view class="flex-col sendCode_box" :class="{'sendCode_box_1':!(sendCode == '重新获取' || sendCode == '获取验证码')}" @click="clickSendCode">
            <text class="withdrawal-text_18" :class="{'withdrawal-text_18_1':codeType}">{{sendCode}}</text>
          </view>
        </view>
        <view class="withdrawal_code_error" v-if="codeType">验证码错误，请重新输入</view>
      </view>
      <view class="flex-col items-center withdrawal-button">
        <button class="btn_box" hover-class="hover" :disabled="disabledType" @click.stop="withdrawFn">提现</button>
      </view>
    </view>
    <u-popup :safe-area-inset-bottom="true" mode="bottom" :borderRadius="16" v-model="showBankPopup" @close="closeBankFn">
      <div class="choiceBank_tit_box">
        <div class="choiceBank_tit_l">选择收款银行卡</div>
        <div class="choiceBank_tit_r" @tap="navigateTo({url: '/pagesA/wallet/chooseBankCard'})">银行卡管理<img class="left_icon_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/jiantou4_icon.png" alt=""></div>
      </div>
      <scroll-view class="bank_card" @scrolltolower="scrolltolowerFn" :scroll-anchoring="true" :scroll-y="true">
        <ul class="bank_list_ul">
          <li class="bank_list_li" v-for="(bank, index) in bankList" :key="index" @tap="clickBankFn(index)">
            <img class="bank_bgImg" :src="bank.backgroundUrl || 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/backgroundUrl_mr.png'" alt="">
            <div class="bank_list_li_t">
              <div class="bank_list_li_t_l">
                <div class="logo_box">
                  <img class="logo_img" v-if="bank.bankLogo" :src="bank.bankLogo" alt="">
                </div>
                <span>{{bank.issuer}}</span>
              </div>
              <div class="bank_list_li_t_r">
                <img class="checkbox_select_box" v-if="selectBankIndex == index" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/success3_icon.png" alt="">
                <img class="checkbox_select_box" v-else src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/checkbox_unselect1.png" alt="">
              </div>
            </div>
            <div class="card_mun_box">{{bank.cardNumber}}</div>
          </li>
        </ul>
        <div class="no_more" v-if="notDataType">没有更多了~</div>
      </scroll-view>
      <div class="iKnow_btn_box">
        <button class="iKnow_btn" hover-class='hover' @click.stop="selectSubmitFn">确定</button>
      </div>
    </u-popup>
    <!-- 授权手机号 -->
    <EmpowerPhone :show="empowerPhoneShowType" @closePhoneFn='closePhoneFn'/>
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import EmpowerPhone from "@/components/empowerPhone/index.vue";
import Util from "@/api/util.js"
import Money from '@/api/money.js'
export default {
  name: "withdrawal",
  components: {
    PublicPage,
    EmpowerPhone
  },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      withdrawalNum: "",
      withdrawalCode: null,
      withdrawalOptions: [
        {
          name: "微信零钱",
        },
        // {
        //   name: "银行卡",
        // },
      ],
      supplyIndex: 0,
      accountName: '',
      sendCode: '获取验证码',
      timer: null, // 计时器
      count: 60,
      receivePath: {},
      getMoney: {
        balance: 0.00
      },
      disabledType: false,
      codeType: false, // 效验验证码错误显示
      bankList: [],
      paramsPage: {
        currentPage: 1,
        pageSize: 10,
      },
      notDataType: false,
      showBankPopup: false,
      bankMsgData: {},
      selectBankIndex: 0,
      empowerPhoneShowType: false,
    };
  },
  onLoad (option) {
    this.receivePath = option;
    this.getMoneyInfo()
  },
  onShow () {
    this.getBankListFn()
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  methods: {
    closePhoneFn(e) {
      this.empowerPhoneShowType = e
    },
    selectSubmitFn () {
      this.bankMsgData = this.bankList[this.selectBankIndex]
      this.showBankPopup = false
    },
    clickBankFn (index) {
      this.selectBankIndex = index
    },
    choiceBankFn () {
      if(this.bankMsgData.userBankId) {
        this.bankList.forEach((item, i)=>{
          if (item.userBankId == this.bankMsgData.userBankId) {
            this.selectBankIndex = i
          }
        })
        this.showBankPopup = true
      } else {
        this.navigateTo({ url: '/pagesA/wallet/chooseBankCard' })
      }
    },
    closeBankFn () {},
    getBankListFn () {
      let params = {
        ...this.paramsPage
      }
      Money.getBankList(params).then(res => {
        if (res.code == 200) {
          if (res.data.records.length>0) {
            if (this.bankList.length>0) {
              this.bankList = this.bankList.concat(res.data.records)
            } else {
              this.bankList = res.data.records
            }
            if (!this.bankMsgData.userBankId&&this.supplyIndex == 1) {
              this.bankMsgData = this.bankList[0]
            }
          }
          if (res.data.records.length<this.paramsPage.pageSize) {
            this.notDataType = true
          } else {
            this.notDataType = false
          }
        }
      })
    },
    withdrawFn () {
      if (this.disabledType) return
      if (!this.withdrawalNum) {
        return wx.showToast({
          title: '请输入提现金额!',
          icon: 'none',
          duration: 1000
        })
      }
      // if (this.supplyIndex == 0) {
      //   if (!this.accountName) {
      //     return wx.showToast({
      //       title: '请输入账户实名!',
      //       icon: 'none',
      //       duration: 1000
      //     })
      //   }
      // }
      if (!this.withdrawalCode) {
        return wx.showToast({
          title: '请输入验证码!',
          icon: 'none',
          duration: 1000
        })
      }
      this.disabledType = true
      let params = {
        money: this.withdrawalNum,
        accountType: Number(this.supplyIndex)+1,
        code: this.withdrawalCode,
      }
      // if (params.accountType == 1) {
      //   params = {
      //     ...params,
      //     realName: this.accountName
      //   }
      // }
      if (params.accountType == 2) {
        params = {
          ...params,
          userBankId: this.bankMsgData.userBankId
        }
      }
      Money.submitWithdrawal(params).then(res => {
        if (res.code == 200) {
          wx.showToast({
            title: '提现成功!',
            icon: 'none',
            duration: 1000
          })
           setTimeout(()=>{
            this.navigateBack({
              delta: 1
            })
          },1000)
        }
        if (res.code == 1017) {
          this.codeType = true
        } else {
          this.codeType = false
        }
        this.disabledType = false
      })
    },
    async getMoneyInfo() {
      Money.getMoneyInfo().then(res => {
        if (res.code === 200) {
          if (res.data !== {}) {
            this.getMoney = res.data
          }
        }
      })
    },
    // 当提现金额发生变化时触发
    withdrawalNumInput (e) {
      let mun = Util.clearNoNum(e.detail.value)
      this.$nextTick(() => {
        if (mun > Number(this.getMoney.balance)) {
          // wx.showToast({
          //   title: '提现金额不可大于当前可提现余额~',
          //   icon: 'none',
          //   duration: 2000
          // })
          this.$nextTick(() => {
            this.withdrawalNum = this.getMoney.balance
            this.$forceUpdate()
          })
          this.withdrawalNum = this.getMoney.balance
        } else {
          this.withdrawalNum = Util.clearNoNum(e.detail.value)
          this.$forceUpdate()
        }
      })
    },
    // 全部提现
    allWithdrawal () {
      if (this.getMoney.balance>0) {
        this.withdrawalNum = this.getMoney.balance
      } else {
        wx.showToast({
          title: '没有可提现金额！',
          icon: 'none'
        })
      }
    },
    withdrawalClick(index) {
      if (this.supplyIndex == index) return
      this.supplyIndex = index
      if (this.supplyIndex == 0) {
        if (this.timer) clearInterval(this.timer)
        this.count = 60
        this.sendCode == '获取验证码'
      }
      if (this.supplyIndex == 1) {
        if (!this.bankMsgData.userBankId) {
          this.bankMsgData = this.bankList[0]
        }
      }
    },
    // 发送验证码
    clickSendCode () {
      if (!this.userInfo.mobile) {
        this.empowerPhoneShowType = true
        return
      }
      if (!(this.sendCode == '重新获取' || this.sendCode == '获取验证码')) return
      Money.withdrawalCode({type: 1}).then(res => {
        if (res.code == 200) {
          this.sendCode = `(${this.count}s)后重新获取`
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.count == 1) {
                this.sendCode = '重新获取'
                clearInterval(this.timer)
                this.timer = null
                this.count = 60
              } else {
                this.count--
                this.sendCode = `(${this.count}s)后重新获取`
              }
            }, 1000)
          }
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.withdrawal {
  background: #f2f3f5;
  width: 100vw;
  height: 100vh;
}
.withdrawal-icon {
  width: 40rpx;
  height: 40rpx;
}
.withdrawal-group_2 {
  height: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}
.withdrawal-button {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 22rpx 32rpx;
  .btn_box {
    width: 100%;
    height: 88rpx;
    color: rgb(255, 255, 255);
    font-size: 32rpx;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(228, 68, 53);
    box-shadow: 0px 4rpx 8rpx 0px rgba(228, 68, 53, 0.5);
    padding: 0;
    margin: 0;
    border-radius: 100rpx;
  }
}
.withdrawal-section_4 {
  padding: 34rpx 22rpx 30rpx 32rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 16rpx;
}
.withdrawal-section_5 {
  margin-top: 32rpx;
  padding-top: 26rpx;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: rgb(255, 255, 255);
}
.withdrawal-section_7 {
  margin-top: 24rpx;
  padding: 20rpx 32rpx;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: rgb(255, 255, 255);
  height: 88rpx;
  display: flex;
  align-items: center;
  .sendCode_box {
    color: #E44435;
    &.sendCode_box_1 {
      color: #C8C9CC;
    }
  }
}
.withdrawal-group_9 {
  .input_box {
    width: 360rpx;
    font-size: 28rpx;
  }
}
.withdrawal-text_3 {
  color: rgb(119, 119, 119);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.withdrawal-group_4 {
  display: flex;
  align-items: flex-end;
}
.withdrawal-divider {
  margin-right: 10rpx;
  background-color: rgb(235, 237, 240);
  height: 2rpx;
}
.withdrawal-text_7 {
  margin-top: 20rpx;
  color: rgb(119, 119, 119);
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: left;
}
.withdrawal-text_8 {
  margin-left: 32rpx;
  color: rgb(0, 0, 0);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.withdrawal-section_6 {
  margin-top: 22rpx;
  background-color: rgb(255, 255, 255);
  // box-shadow: inset 0px -2rpx 0px 0px rgb(238, 238, 238),
  //   inset 0px 2rpx 0px 0px rgb(238, 238, 238);
  position: relative;
}
// .withdrawal-group_10 {
//   padding: 26rpx 36rpx 20rpx;
// }
.withdrawal-group_13 {
  margin: 4rpx 0;
}
.withdrawal-text-wrapper_1 {
  padding: 8rpx 0 6rpx;
  color: rgb(255, 255, 255);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
  background-color: rgb(228, 68, 53);
  border-radius: 24rpx;
  height: 48rpx;
}
.withdrawal-text-wrapper {
  padding: 8rpx 16rpx;
  align-self: center;
  color: rgb(255, 255, 255);
  font-size: 24rpx;
  line-height: 34rpx;
  white-space: nowrap;
  background-color: rgb(228, 68, 53);
  border-radius: 24rpx;
  width: 128rpx;
  height: 48rpx;
}
.withdrawal-group_6 {
  color: rgb(0, 0, 0);
  font-size: 32rpx;
  line-height: 44rpx;
  padding: 24rpx 36rpx;
  border-top: 2rpx solid #f2f3f5;
//   white-space: nowrap;
  .withdrawal-group_mode {
    display: flex;
    align-items: center;
  }
}
.withdrawal-group_7 {
  margin-top: 32rpx;
  padding: 0rpx 60rpx;
}
.withdrawal-group_11 {
  width: 228rpx;
}
.withdrawal-image_9 {
  margin-right: 3rpx;
  width: 48rpx;
  height:48rpx;
}
.withdrawal-text_16 {
  color: rgb(100, 101, 102);
  font-size: 28rpx;
  line-height: 45rpx;
  white-space: nowrap;
}
.withdrawal-text_17 {
  margin-left: 32rpx;
  color: rgb(200, 201, 204);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.withdrawal-text_18 {
  margin: 0 12rpx;
  &.withdrawal-text_18_1 {
    color: #E44435;
  }
}
.withdrawal-text_4 {
  align-self: center;
  color: rgb(50, 50, 51);
  font-size: 36rpx;
  font-weight: 500;
  line-height: 50rpx;
  white-space: nowrap;
}
.withdrawal-num {
  width: 520rpx;
  height: 72rpx;
  font-size: 72rpx;
}
.withdrawal-text_5 {
  color: rgb(50, 50, 51);
  font-size: 72rpx;
  font-weight: 500;
  line-height: 100rpx;
  white-space: nowrap;
}
.withdrawal-image_6 {
  margin: 4rpx 0;
}
.withdrawal-text_9 {
  margin-left: 20rpx;
}
.withdrawal-image_7 {
  margin-left: 20rpx;
  border-radius: 50%;
  width: 48rpx;
  height: 48rpx;
}
.withdrawal-group_8 {
  color: rgb(50, 50, 51);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.withdrawal-group_9 {
  margin-top: 16rpx;
}
.withdrawal-group_12 {
  color: rgb(0, 0, 0);
  font-size: 32rpx;
  line-height: 44rpx;
  white-space: nowrap;
}
.withdrawal-text_15 {
  margin-top: 10rpx;
  align-self: flex-end;
  color: rgb(0, 0, 0, 0.3);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}

.withdrawal-text_12 {
  color: rgb(50, 50, 51);
  font-size: 28rpx;
  line-height: 45rpx;
  white-space: nowrap;
}
.withdrawal-text_13 {
  margin-left: 16rpx;
  color: rgb(200, 201, 204);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.withdrawal-text_14 {
  margin-left: 20rpx;
}

// 提示用户验证码错误
.withdrawal_code_error {
  width: 100%;
  color: $themeColor;
  font-size: 24rpx;
  margin-top: 16rpx;
  text-align: left;
}
// 银行卡样式
.choiceBank_tit_box {
  padding: 24rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .choiceBank_tit_l {
    font-size: 32rpx;
    line-height: 44rpx;
    color: #323233;
    font-weight: bolder;
  }
  .choiceBank_tit_r {
    font-size: 28rpx;
    color: #969799;
    display: flex;
    align-items: center;
    .left_icon_box {
      width: 32rpx;
      height: 32rpx;
      margin-left: 16rpx;
    }
  }
}
.bank_card {
  width: 100%;
  max-height: 50vh;
}
.iKnow_btn_box {
  padding: 20rpx 32rpx;

  // &.iKnow_btn_box_ios {
  //   padding: 20rpx 32rpx 80rpx;
  // }
  .iKnow_btn {
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e44435;
    border-radius: 36rpx;
    font-size: 28rpx;
    color: #fff;
  }
}
</style>
